<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1" import ="com.google.gson.Gson;"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap/css/style.css" />
<script type="text/javascript" src="bootstrap/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<title>Roles Page</title>
</head>
<body>
	<div class="row">
		<div class="col-lg-12">
			<div class="panel panel-success">
				<div class="panel-heading">
					<h4>Role Operations</h4>
				</div>
				<div class="panel-body">
					<center>
						<img src="bootstrap/images/logo_ibm.png" width="90" height="50">
					</center>
					<hr>
					<form action="./DeleteRoleServlet" method="POST">
						<div class="form-group">
						<label>Role Name :</label>
							<input type="text" value="${role.name}" class="form-control"
								readonly>
						</div>
						<br />
						<div class="form-group">
						<label>Role Description :</label>
							<textarea class="form-control" rows="3" readonly>${role.description}</textarea>
						</div>
						<a class="btn btn-danger" href="./RoleOPServlet?id=${role.id}">Cancel</a>
					</form>
					<hr>

					<!--  	<button class="btn btn-warning" onClick="test()" >Press here </button> -->
					<!--  <input type="button" id="load" class="btn btn-warning"
						value="Load Permissions" />-->
						
					<div id="print">

						<table class="table" border="1">
							<tr>
								<th>ID</th>
								<th>Name</th>
								<th>Description</th>
								<th>Assigned</th>
							</tr>
					</div>
					<script type="text/javascript" language="javascript">
					var myResult;
						$(document).ready(
								function() {
								//	$("#load").click(
										//	function() {
											//	alert("Welocme");

												$.getJSON("./role_permServlet",
														"id=${role.id}",
														function(result) {
															myResult = result;
															/*$.each(result, function(i, field){
															 $("#print").append("<tr><td>"+field.id +"</td><td>" + field.name +"</td><td>" + field.description +"</td><td>"+field.assigned +"</td></tr>");
															});
															$("#print").append("</table>");*/
															
															var tr;
													        for (var i = 0; i < result.length; i++) {
													        	
													        	
													            tr = $('<tr/>');
													            tr.append("<td>" + result[i].id + "</td>");
													            tr.append("<td>" + result[i].name + "</td>");
													            tr.append("<td>" + result[i].description + "</td>");
																if(result[i].assigned == true){
																	tr.append("<td>" + "<input type ="+"checkbox"+" onClick="+"clickMe("+result[i].id+","+i+")"+" name = "+result[i].name+" id = "+result[i].id+" checked />"+ "</td>");
													        	}else{
													        		tr.append("<td>" + "<input type = "+"checkbox"+" onClick="+"clickMe("+result[i].id+","+i+")"+" id = "+result[i].id+" />"+ "</td>");
													        	}
													            
													            $('table').append(tr);
								
													        }
													        });
										//	});
								});
						
					</script>
						<script>
						function clickMe(id,i){
							var box = document.getElementById(id);
							if(box.checked){
								myResult[i].assigned = true;
							}
							else{
								myResult[i].assigned = false;
							}
						}
						
						function send(){
							 
							 $.ajax({
							     type: 'GET',
							     url: './UpdateRoleServlet?id=${role.id}',
							     dataType: 'JSON',
							     data:{
							         data: JSON.stringify(myResult)
							     }
							 });
							
						}
					</script>
				</div>
			</div>
		</div>
		<button class = "btn btn-success" onClick="send()" >Update</button><br>
	</div>
</body>
</html>